@charset "UTF-8";
body, p {
  padding: 0;
  margin: 0; 
}
[v-cloak] {
    display: none;
  }
body {
  overflow: hidden;
  min-height: 100vh; 
  // background-image: url('./images/background.png');
  background-size: cover;
  background-color: rgba(146, 58, 166, 1);
}
#app {
    width: 100%;
    color: white;
    overflow: hidden;
    background-color: RGBA(189, 89, 230, 1);
    #main {
        width: 100%;
        // height: 40.373333rem;
        background-image: url('./images/header-bgimg@2x.png');
        background-repeat: no-repeat; 
        background-size: 100%;
        position: relative;
        .title-img {
          width: 100%;
          position: relative;
          top: 1.093333rem;
          text-align: center;
          img{
            width: 74%;
          }
        }
        .title-desc-1 {
            width: 100%;
            height: .426667rem;
            position: relative;
            text-align: center;
            margin-top: 1.436667rem;
            p{        
              font-weight: 400;
              font-family:PingFangSC-Regular,PingFang SC;
            }
        }
        .carousel {
          width: 100%;
          height: 1rem;
          position: relative;
          background-color: rgba(14, 0, 32, 1);
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: .266667rem;
         }
          .carousel .msg {
            width: 65.71%;
            overflow: hidden;
            text-align: center;}
            .carousel .msg p {
              white-space: nowrap;
              // animation: carousel 40s linear infinite normal;
              animation: carousel 40s linear 1s infinite normal;
            }
              .carousel .carousel-nickname {color: rgba(253, 232, 0, 1); }
              .carousel .carousel-gift {color: RGBA(199, 244, 247, 1); }
        .gift-tree-item{
          width: 100%;
          position: absolute;
          top: 7.593333rem;
          .gift-tree-line-1 {
            width: 100%;
            height: 1.52rem;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
          }
          .gift-tree-line-2 {
            width: 100%;
            height: 1.52rem;
            display: flex;
            justify-content: space-around;
            align-items: center;
            position: relative;
            // background-color: green;
          }
          .gift-tree-line-3 {
            width: 100%;
            height: 1.52rem;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            // background-color: olive;
          }
          .gift-tree-line-4 {
            width: 100%;
            height: 1.52rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            top:-0.4rem;
            .box-1{margin-left: 2.13%;}
            .box-2{margin-right: 2.13%;}
          }
          .gift-tree-box{
            width:25%;
            display: flex;
            justify-content: center;
            align-items: center;
            .gift-tree-img-top{
              position: absolute;
              width:15.93%;
              align-self: flex-end;
              z-index: 2;
            }
            .gift-tree-img-bottom{
              position: absolute;
              width:24.27%;
            }
          }
        }
            .float-box-1 {
                position: absolute;
                width: 100%;
                display: -webkit-flex; /* Safari */
                display: flex;
                justify-content: space-between;
                margin-top: .133333rem;
                z-index: 99;
              }
            .float-box-2 {
                position: relative;
                width: 100%;
                display: -webkit-flex; /* Safari */
                display: flex;
                justify-content: space-between;
                margin-top: 1.306667rem;
              }
              .flex-box{
                width: 22.4%;
                height: .8rem;
                display: -webkit-flex; /* Safari */
                display: flex;
                justify-content: center;
                align-items: center;        
                
              }
              .flex-box-1{
                border-radius:0 .066667rem .266667rem 0;
                border: .026667rem solid rgba(255,255,255,1);
                border-left-style:none;
              }
              .flex-box-2{
                border-radius:.066667rem 0 0 .266667rem;
                border: .026667rem solid rgba(255,255,255,1);
                border-right-style:none;
              }
              .flex-box-3{
                border-radius:.066667rem 0 0 .266667rem;
                border: 0 solid rgba(255,255,255,1);
                background-color:#c8b2f1;
                color: rgba(37, 24, 54, 1);
                img {
                  margin-left: .16rem;
                  width:7.14%;
                  height: .266667rem;
                }
              }
              .color0 {
                background-color: #FFFFFF;
              }
              .color1 {
                background-color: #FFD7D7;
              }
              .color2 {
                background-color: #D7FFE4;
              }
        .ticket  {
          width: 100%;
          position: relative;
          display: -webkit-flex; /* Safari */
          display: flex;
          justify-content: space-between;
          justify-content: center;
          align-items: center; 
          margin-top: 7.013333rem;
          div{
            width: 50%;
            height: .613333rem;
            display: -webkit-flex; /* Safari */
            display: flex;
            justify-content: center;
            align-items: center; 
            img{
              width: .426667rem;
              height: .426667rem;
            }
            .img-2 {
              width: .48rem;
              height: .373333rem;
            }
          }
        }  
        .ticket-num  {
          width: 79.2%;
          position: relative;
          display: -webkit-flex; /* Safari */
          display: flex;
          flex:0 1 auto;
          justify-content: space-between;
          margin-top:1.866667rem;
          left:10.4%;
          div {
            width: 26.57%;
            height: .8rem;
            display: -webkit-flex; /* Safari */
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius:.066667rem .266667rem  .066667rem .266667rem ;
            background-color:RGBA(122, 42, 141, 1);
          }
          .bgcolor {
            background-color: RGBA(252, 114, 153, 1);
          }
        } 
        .turn  {
          position: relative;
          display: -webkit-flex; /* Safari */
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: .533333rem;
          .turn-btn {
            width: 25.07%;
            height:.853333rem;
            display: -webkit-flex; /* Safari */
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius:.066667rem .266667rem  .066667rem .266667rem ;
            background-color:RGBA(255, 239, 13, 1);
            color: RGBA(191, 90, 233, 1);
            p{
              font-weight:600;
              font-family:PingFangSC-Medium,PingFang SC;
            }
          }
        }
        .list  {
          position: relative;
          display: -webkit-flex; /* Safari */
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: .8rem;
          // margin-bottom: .56rem;
          margin-bottom: .826667rem;
          .list-btn {
            width: 25.07%;
            height:.853333rem;
            display: -webkit-flex; /* Safari */
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius:.066667rem .266667rem  .066667rem .266667rem ;
            border: .013333rem solid rgba(255,255,255,1);
            p{
              font-weight:600;
              font-family:PingFangSC-Medium,PingFang SC;
            }
          }
        }
        .foot {
          width: 100%;
          height: 22.666667rem;
          background: linear-gradient(to bottom,rgba(189, 89, 230, 1),rgba(149, 60, 170, 1));
          // margin-bottom: .533333rem;
          .gift-title {
            width: 100%;
            height: .426667rem;
            position: relative;
            display: -webkit-flex; /* Safari */
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: .56rem;
            img{
              width: 36.27%;
            }
          }
          .gift-box {
            margin-bottom: .56rem;
          }
          .gift-item {
            width: 79.2%;
            position: relative;
            display: -webkit-flex; /* Safari */
            display: flex;
            flex-wrap:wrap;
            justify-content: space-between;
            left:10.4%;
            .item-column {
              width: 26.57%;
              height: 3.066667rem;
              display: -webkit-flex; /* Safari */
              display: flex;
              flex-direction: column;
              // flex-wrap:wrap;
              justify-content: flex-end;
              align-items: center;
              .column-1{
                width: 100%;
                height: 2.201867rem;
                background-image: url(./images/gift-bgimg@2x.png);
                background-repeat: no-repeat;
                background-position: center;
                background-size: contain;
                img{
                  width: 99.36%;
                  height: 1.908533rem;
                  margin-top: .293333rem;
                  border-radius: 1.066667rem;
                }
              }
              .column-2{
                width: 100%;
                height: .426667rem;
                display: -webkit-flex; /* Safari */
                display: flex;
                justify-content: center;
                align-items: center;
                white-space:nowrap;
                margin-top: .266667rem;
              }
            }
          }
        }
        .foot-buttom{
          width: 100%;
          height: 1.066667rem;
          background-color: rgba(149, 60, 170, 1);
        }
        .banner-title-list {
          position: fixed;
          width: 100%;
          top: 17.08%;
          display: -webkit-flex; /* Safari */
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 101;
          overflow: hidden;
          .list-box {
            width: 84%;
            background:rgba(148,59,168,1);
            border-radius:.32rem;
            display: -webkit-flex; /* Safari */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .list-cell-1 {
              width: 100%;
              height:.693333rem;
              display: -webkit-flex; /* Safari */
              display: flex;
              justify-content: center;
              align-items: center;
              margin: .373333rem auto .426667rem;
              p {
                font-family:PingFangSC-Regular,PingFang SC;
                font-weight:400;
              }
            }
            .list-user-list {
              width:90.48%;
              height:8.613333rem;
              background:rgba(59,17,57,1);
              border-radius:24px;
              margin-bottom: .4rem;
              padding-top: .426667rem;
              padding-bottom: .16rem;
              
              overflow-y: auto;
              .list-list-div{
                width: 100%;
                margin-bottom: .32rem;
                display: -webkit-flex; /* Safari */
                display: flex;
                justify-content: center;
                align-items: center;
                .item{
                  flex: 1;
                  height: 1.386667rem;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                }
                .item-1{
                  height:.693333rem;
                  color:rgba(150, 150, 150, 1)
                }
                .item-2{
                  flex: 0 0 20%;
                  img {
                    width: 1.226667rem;
                    height: 1.226667rem;
                    border-radius: 50%;
                    overflow: hidden;
                  }
                }
                .color-1{
                  color: rgba(249, 221, 13, 1);
                }
                .color-2{
                  color: rgba(218, 218, 218, 1);
                }
                .color-3{
                  color: rgba(184, 129, 7, 1);
                }
                .item-3{
                  flex: 0 0 40%;
                  display: flex;
                  flex-direction: column;
                  overflow:hidden;
                  text-overflow:ellipsis; //溢出用省略号显示
                  white-space:nowrap; //溢出不换行
                  .item3-column-1 {
                    width: 100%;
                    height: .693333rem;
                    display: flex;
                    align-items: center;
                    white-space: nowrap;
                    overflow:hidden; //超出的文本隐藏
                    text-overflow:ellipsis; //溢出用省略号显示
                    white-space:nowrap; //溢出不换行
                    p {
                    overflow:hidden; //超出的文本隐藏
                    text-overflow:ellipsis; //溢出用省略号显示
                    white-space:nowrap; //溢出不换行
                    }
                  }
                  .item3-column-2 {
                    width: 100%;
                    height: .693333rem;
                    display: flex;
                    align-items: center;
                    white-space: nowrap;
                    overflow: hidden;
                    color:rgba(240,191,242,1);
                  }
                }
                .item-4{
                  flex: 0 0 30%;
                  display: flex;
                  flex-direction: column;
                  .item4-column-1 {
                    width: 100%;
                    height: .693333rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  }
                  .item4-column-2 {
                    width: 100%;
                    height: .693333rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    white-space: nowrap;
                    overflow: hidden;
                  }
                }
                .list-img{
                  width: 1.066667rem;
                  height: 0;
                  padding-bottom: 11.94%;
                  margin-left: 8.66%;
                  display: inline-block;
                  background-position:center;
                  background-size: cover;
                  border-radius: 50%;
                  overflow: hidden;
                  margin-top: .053333rem;
                  img{
                    width: 1.066667rem;
                    height:1.066667rem;
                  }
                }
                .list-cell-2{
                  width:25.07%;
                  display: inline-block;
                  margin-left: 5%;
                  position: relative;
                  top:-0.346667rem;
                }
                .list-cell-3{
                  width: 20.93%;
                  display: inline-block;
                  margin-left: 8%;
                  position: relative;
                  top:-0.4rem;
                }
                .nickname{
                  margin-left:15%;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
              
              } 
            }
            .list-user-gift {
              width:90.48%;
              height:8.613333rem;
              background:rgba(59,17,57,1);
              border-radius:24px;
              margin-bottom: .4rem;
              padding-top: .426667rem;
              padding-bottom: .16rem;
              overflow: scroll;
              .list-list-div{
                width: 100%;
                margin-bottom: .32rem;
                display: -webkit-flex; /* Safari */
                display: flex;
                justify-content: center;
                align-items: center;
                .item{
                  flex: 1;
                  height: 1.386667rem;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                }
                .item-3{
                  flex: 0 0 60%;
                  display: flex;
                  flex-direction: column;
                  overflow:hidden;
                  text-overflow:ellipsis; //溢出用省略号显示
                  white-space:nowrap; //溢出不换行
                  .item3-column-1 {
                    width: 100%;
                    height: .693333rem;
                    display: flex;
                    align-items: center;
                    white-space: nowrap;
                    overflow:hidden; //超出的文本隐藏
                    text-overflow:ellipsis; //溢出用省略号显示
                    white-space:nowrap; //溢出不换行
                    p {
                    overflow:hidden; //超出的文本隐藏
                    text-overflow:ellipsis; //溢出用省略号显示
                    white-space:nowrap; //溢出不换行
                    }
                  }
                  .item3-column-2 {
                    width: 100%;
                    height: .693333rem;
                    display: flex;
                    align-items: center;
                    white-space: nowrap;
                    overflow: hidden;
                    color:rgba(240,191,242,1);
                  }
                }
                .item-4 {
                  flex: 0 0 20%;
                  img {
                    width: 1.226667rem;
                    border-radius: 50%;
                    overflow: hidden;
                  }
                }
              }
            }
            .list-user-gift::-webkit-scrollbar {
              width: 0 !important;
              height: 0;
            }
            .list-user-gift-height {
              height:3.613333rem;
            }
            .list-user-gift-height-10 {
              height:5.613333rem;
            }
            .list-user-gift-bgimg {
              background-image: url('./images/gift-bgimg@2x.png');
            }
            .list-cell-desc {
              width:90.48%;
              // height:10rem;
              border-radius:24px;
              margin-bottom: .4rem;
              p {
                white-space: pre-line;
                font-family:PingFangSC-Regular,PingFang SC;
                font-weight:400;
                letter-spacing: .013333rem;
              }
            }
            .list-user-gift-blanck {
              width:90.48%;
              height:8.613333rem;
              background:rgba(59,17,57,1);
              border-radius:24px;
              margin-bottom: .4rem;
              padding-top: .426667rem;
              padding-bottom: .16rem;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              .wishing-list-div {
                width: 51.93%;
                img{
                  width: 100%;
                }
              }
              .wishing-list-div-1{
                margin-top: .8rem;
              }
              .wishing-list-div-2{
                margin-top: .266667rem;
              }
            }
          }
        }
        .banner-title-list-top{
          top:27%;
        }
        .banner-title-list-top-10{
          top:24%;
        }
        .overlay {
          width: 100%;
          height: 100vh;
          position: fixed;
          top: 0;
          background-color: rgba(0, 0, 0, 0.7);
          // display: none;
          z-index: 100;
        }
        #over-dialog {
          position: fixed;
          top: 34.93%;
          left: 50%;
          margin-left: -3.633333rem;
        
          width: 72%;
          height: 5.586667rem;
          background-color: rgba(0, 0, 0, 0.7);
          border-radius: .266667rem;
          text-align: center;
          z-index: 102;
          .msg{
            width: 100%;
            height: 4.24rem;
            position: relative;
            text-align: center;
            p{
              padding: 1.946667rem 27.26%;
              font-weight: 400;
            }
          }
    
          .line{
            background-color: white;
            width: 100%;
            height: .013333rem;
            // margin-top: 4.133333rem;
          }
          .btn{
            padding: .453333rem;
            position: relative;
            text-align: center;
            letter-spacing: .026667rem;
            font-weight: 600;
          }
        }
        #over-dialog-ticket {
          position: fixed;
          top: 34.93%;
          left: 50%;
          margin-left: -3.633333rem;
          width: 72%;
          height: 5.333333rem;
          display: -webkit-flex; /* Safari */
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          background-color: rgba(37, 24, 54, 1);
          border-radius: .266667rem;
          z-index: 101;
          .ticket-img-div{
            position: relative;
            width: 11.11%;
            margin: auto;
            margin-top: .373333rem;
            margin-bottom: .266667rem;
            img{
              width: 100%;
            }
          }
          .ticket-desc{
            width: 100%;
            margin-bottom: .533333rem;
            text-align: center;
          }
          .ticket-num-tip{
            display: flex;
            align-items: center;
            margin-bottom: .426667rem;
            .ticket-num-cell-1{
              width:17.56%;
              text-align: center;
              margin-left: 1.44rem;
              display: inline-block;
            }
            .ticket-num-cell-2{
              width:44.44%;
              height: .533333rem;
              position: relative;
              display: flex;
              justify-content: center;
              align-items: center;
              box-sizing: border-box;
              text-align: center;
              .dialog-plus{
                width: 16.67%;
                height: .5rem;
                display: inline-block;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius:.053333rem;
                border:1px solid rgba(218,218,218,1);
                img {
                  width: 50%;
                }
                p{
                  margin-top: .06rem;
                }
              }
              .dialog-input{
                width:60%;
                height: .5rem;
                text-align: center;
                // float: left;
                display: inline-block;
                margin-left: -0.026667rem;
                left: .013333rem;
                background-color: rgba(37, 24, 54, 1);
                border:1px solid rgba(218,218,218,1);
                color: rgba(218,218,218,1);
                p{
                  margin-top: .08rem;
                }
              }
              .dialog-minus{
                width: 16.67%;
                height: .5rem;
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-left: -0.026667rem;
                border-radius:.053333rem;
                border:1px solid rgba(218,218,218,1);
                img {
                  width: 50%;
                }
                p{
                  margin-top: .06rem;
                }
              }
              
            }
          }
          .damion-num-tip{
            width: 100%;
            display: flex;
            align-items: center;
            margin-bottom: .226667rem;
            .damion-num-cell-1{
              width:17.56%;
              text-align: center;
              margin-left: 1.44rem;
              display: inline-block;
            }
            .damion-num-cell-2{
              width:44.44%;
              height: .533333rem;
              position: relative;
              display: flex;
              align-items: center;
              box-sizing: border-box;
              text-align: center;
              p{
                color: rgba(254, 245, 13, 1);
              }
            }
          }
          .line-1{
            background-color: white;
            width: 100%;
            height: .013333rem;
            // margin-top: 4.133333rem;
          }
          .line{
            width: 100%;
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-radius: .266667rem;
            background-color: rgba(218,218,218,1);
          }
          .btn1{
            width: 49.9%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgba(37, 24, 54, 1);
            border-radius: 0 0 0 .266667rem;
            height: 1.066667rem;
          }
          .btn2{
            width: 49.9%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgba(37, 24, 54, 1);
            border-radius: 0 0 .266667rem 0;
            height: 1.066667rem;
          }
        }
    }
}


[data-dpr="1"] {
    #app {
        font-size: 14px;
        line-height: 16px;
      }
    .carousel .msg span {
        font-size: 15px;
        line-height: 16px;
    }
    .title-desc-1 ,.ticket p{
      font-size: 15px;
      line-height: 16px;
    }
    .turn-btn ,.list-btn {
      font-size: 16px;
      line-height: 16px;
    }
    .list-cell-1 p{
      font-size: 16px;
      line-height: 26px;
    }
    .list-cell-desc p{
      font-size: 15px;
      line-height: 25px;
    }
    .item3-column-1,.item4-column-1 p{
      font-size: 15px;
      line-height: 26px;
    }
    .item3-column-2,.item4-column-2 p{
      font-size: 12px;
      line-height: 26px;
    }
    .ticket-num-cell-1 p{
      font-size: 15px;
      line-height: 14px;
    }
    .item-1 p{
      font-size: 18px;
      line-height: 26px;
    }
}

[data-dpr="2"] {
    #app {
      font-size: 28px;
      line-height: 32px;
    }
    .carousel .msg span {
      font-size: 30px;
      line-height: 32px;
    }
    .title-desc-1 ,.ticket p{
      font-size: 30px;
      line-height: 32px;
    }
    .turn-btn ,.list-btn {
      font-size: 32px;
      line-height: 32px;
    }
    .list-cell-1 p{
      font-size: 32px;
      line-height: 52px;
    }
    .list-cell-desc p{
      font-size: 30px;
      line-height: 50px;
    }
    .item3-column-1,.item4-column-1 p{
      font-size: 30px;
      line-height: 52px;
    }
    .item3-column-2,.item4-column-2 p{
      font-size: 24px;
      line-height: 52px;
    }
    .ticket-num-cell-1 p{
      font-size: 30px;
      line-height: 28px;
    }
    .item-1 p{
      font-size: 36px;
      line-height: 52px;
    }
}

[data-dpr="3"] {
    #app {
      font-size: 42px;
      line-height: 48px;
    }
    .carousel .msg span {
      font-size: 45px;
      line-height: 48px;
    }
    .title-desc-1 ,.ticket p{
      font-size: 45px;
      line-height: 48px;
    }
    .turn-btn ,.list-btn {
      font-size: 48px;
      line-height: 48px;
    }
    .list-cell-1 p{
      font-size: 48px;
      line-height: 78px;
    }
    .list-cell-desc p{
      font-size: 45px;
      line-height: 75px;
    }
    .item3-column-1,.item4-column-1 p{
      font-size: 45px;
      line-height: 78px;
    }
    .item3-column-2,.item4-column-2 p{
      font-size: 36px;
      line-height: 78px;
    }
    .ticket-num-cell-1 p{
      font-size: 45px;
      line-height: 42px;
    }
    .item-1 p{
      font-size: 54px;
      line-height: 78px;
    }
}
@keyframes carousel {
  0% {
    margin-left: 0px; }
  10% {
    margin-left: -5.8rem; }
  20% {
    margin-left: -11.6rem; }
  30% {
    margin-left: -17.4rem; }
  40% {
    margin-left: -23.2rem; }
  50% {
    margin-left: -29rem; }
  60% {
    margin-left: -34.8rem; }
  70% {
    margin-left: -40.6rem; }
  80% {
    margin-left: -46.4rem; }
  90% {
    margin-left: -52.2rem; }
  100% {
    margin-left: -58rem; } }
/* iphoneX、iphoneXs */
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  .my-call-list {
    height: 10.32rem !important; } }
/* iphone Xs Max */
/* iphone XR */
/* 横屏 */